<template>
  <div>
    <el-table :data="tableData.records" border style="width: 100%">
      <el-table-column
        prop="categoryName"
        label="分类"
        width="130"
      ></el-table-column>
      <el-table-column
        prop="subject"
        label="标题"
        width="130"
      ></el-table-column>
      <el-table-column label="预览" width="130">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.image.images[0]"
            :preview-src-list="scope.row.image.images"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="sku" width="260">
        <template slot-scope="scope">
          <el-select
            default-first-option
            placeholder="请选择"
            v-model="a[scope.$index]"
          >
            <el-option
              v-for="(item, index1) in scope.row.skuInfos"
              :key="index1"
              :label="
                item.attributes.length > 0
                  ? item.attributes[0].attributeName +
                    ':' +
                    item.attributes[0].attributeValue
                  : item.attributes.length > 1 ? item.attributes[1].attributeName +
                    ':' +
                    item.attributes[1].attributeValue : ''
              "
              :value="index1"
            >
              <span v-for="(i, ind) in item.attributes" :key="ind"
                >{{ i.attributeName }}:{{ i.attributeValue }}</span
              >
              <span>价格：{{ item.consignPrice }}</span>
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="referencePrice" label="价格范围" width="200">
        <template slot-scope="scope">
          <span
            v-for="(item, index) in scope.row.saleInfo.priceRanges"
            :key="index"
          >
            <span>起批量：{{ item.startQuantity }}</span>
            <span>价格：{{ item.price }}</span>
            <br />
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteGoods(scope.row.id)">删除</el-button>
          <el-button @click="watchGoods(scope.row.offerId)">查看详情</el-button>
          <!-- <el-button @click="$router.push({path: `/1688/to-tt/${scope.row.id}`})">上架抖店</el-button> -->
        </template>
      </el-table-column>
    </el-table>
    <el-row style="margin-top: 15px; float: right">
      <div class="block">
        <el-pagination
          @current-change="splitPage"
          :page-sizes="[16]"
          :page-size="16"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.total"
        ></el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "library",
  data() {
    return { tableData: {}, a: [] };
  },
  methods: {
    watchGoods(offerId) {
      if (offerId != null) {
        this.$router.push({ path: `/1688/shop/detail/${offerId}` });
      } else {
        this.$message({ message: "商品ID为空", type: "warning" });
      }
    },
    deleteGoods(goodsId) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$http
            .delete(`/aliGoodsLib/delete-goods/${goodsId}`)
            .then((response) => {
              this.$message({ message: "删除成功", type: "success" });
              this.getData();
            })
            .catch((err) => {
              this.$message({ message: "删除失败", type: "warning" });
            });
        })
        .catch(() => {});
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    splitPage(res) {
      this.getData(res);
    },
    async getData(index = 1) {
      await this.$http
        .get(`/aliGoodsLib/get-goods/${index}`)
        .then((response) => {
          if (response.data.code == 403) {
            this.$message({
              message: "网络错误【" + response.data.message + "】",
              type: "warning",
            });
          } else {
            this.tableData = response.data.dataMap.data;
            this.tableData.records.forEach((item, index) => {
              Object.keys(item).forEach((key) => {
                if (key != "id") {
                  this.tableData.records[index][key] = JSON.parse(
                    this.tableData.records[index][key]
                  );
                }
              });
            });
          }
        })
        .catch((err) => {
          this.$message({ message: "网络错误", type: "warning" });
        });
    },
  },
  created() {
    this.getData();
  },
};
</script>
